<!-- 界面 -->
<template>
    <div>
        <el-input v-model="input" @input="info" placeholder="请输入内容"></el-input>
        <el-button @click="find">点击</el-button>
        <div>{{data}}</div>
    <!-- 全选框 -->
    <el-checkbox v-model="isCheckedAll" @change="handleCheckAll">{{ isCheckedAll ? '取消全选' : '全选' }}</el-checkbox>
    <!-- 单选框列表 -->
    <el-checkbox v-for="(item, index) in list" :key="item.id" v-model="checkedList[index]" :label="item.id">
      {{ item.name }}
    </el-checkbox>
    </div>
</template>
<!-- JavaScript逻辑处理   功能逻辑 -->
<script>
import {userInfo} from '../ajax/get'
import {userRegistration} from '../ajax/post'


export default {
    name: "test",
    data() {
	return {
		input: '', // 输入值 自定义属性
        data: '', // 后端响应的结果
        list: [
        {id: 1, name: '选项1'},
        {id: 2, name: '选项2'},
        {id: 3, name: '选项3'},
        {id: 4, name: '选项4'},
        {id: 5, name: '选项5'}
      ],
      checkedList: [], // 保存单选框的选中状态
      isCheckedAll: false // 是否全选
	}
    },
    computed: {
    // 计算选中的单选框数量
    checkedCount() {
      return this.checkedList.filter(Boolean).length;
    }
  },
  watch: {
    // 监听选中的单选框数量变化，更新全选状态
    checkedCount() {
      this.isCheckedAll = this.checkedCount === this.list.length;
    }
  },
    methods:{
        info(){
            console.log(this.input);
        },
        // 点击查找用户信息返回到data
        find(){
            userInfo(this.input).then(res => {
                console.log(res);
                this.data=res.data.data;
            })
        },
        // post接口演示
        userRegistration () {
            let obj ={
                "passWord": "",
                "userName": this.input
            };
            userRegistration(obj).then(res => {
                console.log(res)
            })
        },
        // 全选/取消全选
        handleCheckAll(checked) {
        this.checkedList = new Array(this.list.length).fill(checked);
        }
    },
    mounted() {
    this.checkedList = new Array(this.list.length).fill(false);
    }

}
</script>
<!-- 样式  -->
<style>

</style>